<template>
    <div>
        <!-- 头部 -->
            <van-nav-bar
                title="不凡"
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
                />
         <!-- 标签栏 -->
         
            <van-tabs v-model="name" @click="goodsi">
                        <van-tab v-for="item in nav" :title="item.name" :key="item.id" :name="item.name" >
                                
                    </van-tab>
            </van-tabs>
            <div class="content-list">
                <div class="info">
                        <p class="p1">{{navtitle.name}}</p>
                        <p class="p2">{{navtitle.front_name}}</p>
                </div>
                <div class="content-bottom">
                        <div class="list" v-for="item in goodsitem" :key="item.id">
                            <router-link :to="`/goodsinfo?id=${item.id}`">
                            <img :src="item.list_pic_url" alt="">
                            <p class="p1">{{item.name}}</p>
                            <p class="p2">￥{{item.retail_price}}</p>
                            </router-link>
                        </div>
                </div>

            </div>
        
    </div>
</template>

<script>
import { categoryinfo , goodsList} from "../../../api/category/index.js"
    export default {
        data() {
            return {
                nav:[],
                activeName:"",
                name:"",
                goodsitem:[],
                navtitle:'',


            }
        },
        methods:{
            onClickLeft(){
                    this.$router.go(-1)
            },
            goodsi(name){
                    // 第一次请求
                   categoryinfo(
                            {id:this.$route.query.item.id}
                        ).then(res=>{
                            this.navtitle = res.navData.find(el=>el.name ==name )
                           
                            
                    });
                    // 第二次请求
                    // console.log(name);
                    var i = this.nav.find(el=>el.name == name)
                    // console.log(i);
                    goodsList({
                        categoryId:i.id
                    }).then(res=>{
                        // console.log(res,"aaaa");
                        this.goodsitem = res.data
                    })
            }
        },
        created() {
             
            // console.log(this.nav,"item传来的数据");
            categoryinfo(
                {id:this.$route.query.item.id}
              
            ).then(res=>{
                // console.log(res,"获取的数据")
                
                this.name = res.currentNav.name
                 this.nav = res.navData
                this.navtitle = res.navData.find(el=>el.name ==this.$route.query.item.name )
            });
              goodsList({
                        categoryId:this.$route.query.item.id
                    }).then(res=>{
                       this.goodsitem = res.data
                    })

        },
    }
</script>

<style lang="scss" scoped>
    .content-list {
        width: 100%;
        // background-color: green;
        .info {
            width: 100%;
            height: 101px;
            box-sizing: border-box;
            padding: 10px;
            margin-top: 10px;
            background-color: #ffffff;
            .p1 {
                display: block;
                width: 100%;
                text-align: center;
                color: #333;
                font-size: 15px;
                
            }
            .p2 {
                display: block;
                width: 100%;
                text-align: center;
                color: #999;
                font-size: 12px;
            }
        }
        .content-bottom {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-content: space-around;
            flex-wrap: wrap;
            margin-top: 10px;
            .list {
                width: 185px;
                height: 240px;
                margin-top: 5px;
            background-color: #ffffff;

                img {
                    display: block;
                    width: 151px;
                    height: 151px;
                    margin: 0 auto;
                    // background-color: gray;
                }
                .p1 {
                    display: block;
                    width: 100%;
                    text-align: center;
                    font-size: 0.32rem;
                    color: #333;
                    
                }
                 .p2 {
                    display: block;
                    width: 100%;
                    text-align: center;
                    font-size: 0.4rem;
                    color: #b4282d;
                    
                }
            }
        }
    }
</style>